<template>
    <div class="document-manager-wapper">
        <van-nav-bar
                title="仓库详情"
                left-text="返回"
                left-arrow
                fixed
                @click-left="onClickLeft"
        >
            <van-icon name="arrow-left" slot="left"/>
            <!--<van-icon name="search" slot="left"/>-->
        </van-nav-bar>
        <div class="document-content" ref="content">
            <div class="cell-content">
                <div class="cell-content-body">
                    <div class="cell-title">
                        {{ title }}
                        <div class="switch-div">
                            <span class="span-title">自动刷新</span>
                            <van-switch v-model="checked" size="14px"/>
                        </div>
                        <div class="switch-div" style="left:10px;">
                            <van-button type="primary" size="mini" @click="getLocation"
                            >刷新
                            </van-button
                            >
                        </div>
                    </div>
                    <div class="cell-content-map-input cell-content-map-input-flex" style="justify-content: flex-end;">
                        <div style="display: flex;align-items: center;">
                            <span style="width: 20px;height: 20px;background: yellow;display: block"></span>
                            <span style="margin-left: 10px;">库存已满</span>
                        </div>
                        <div style="display: flex;align-items: center;margin-left: 10px;">
                            <span style="width: 20px;height: 20px;background: green;display: block"></span>
                            <span style="margin-left: 10px;">空库存</span>
                        </div>
                    </div>
                    <div class="cell-content-map-input cell-content-map-input-flex">
                        <div class="cell-content-map-input-value">
                            <div style="position: absolute;top:-8px;">取货库位</div>
                            <van-cell-group>
                                <van-field v-model="value1" placeholder="请输入库位"/>
                            </van-cell-group>
                        </div>
                        <div class="cell-content-map-input-img">
                            <img src="@/assets/images/arrow.png"/>
                        </div>
                        <div class="cell-content-map-input-value">
                            <div style="position: absolute;top:-8px;">放货库位</div>
                            <van-cell-group>
                                <van-field v-model="value2" placeholder="请输入库位"/>
                            </van-cell-group>
                        </div>
                        <div>
                            <van-button type="info" size="small" @click="sumbit"
                            >提交
                            </van-button
                            >
                        </div>
                    </div>
                    <div class="cell-wapper">
                        <div class="cell-wapper-column" v-for="(item, index) in list">
                            <div style="position: absolute;top:-20px;">第{{index+1}}层</div>
                            <div
                                    :class="'cell-wapper-row' + subitem.color"
                                    v-for="(subitem, subindex) in item.locationVos"
                                    :style="{ width: 100 / item.locationVos.length + '%' }"
                                    @click="showInfo(subitem.locationid,subitem.color)"
                            >
                                {{subindex+1}}
                            </div>
                            <!-- :style="{'width':(100/item.locationVos.length)+'%'},{'background':item.color=='2'?'yellow':'#A9A9A9'}" -->
                            <!--<div class="cell-wapper-row"></div>-->
                            <!--<div class="cell-wapper-row"></div>-->
                            <!--<div class="cell-wapper-row"></div>-->
                            <!--<div class="cell-wapper-row"></div>-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <van-action-sheet
                v-model="show"
                :cancel-text="cancelText"
                @cancel="onCancel"
                title="货架详情">
            <div class="action-sheet-table">
                <table>
                    <thead>
                    <tr>
                        <th>物资编码</th>
                        <th>物资名称</th>
                        <th>规格型号</th>
                        <th>单位</th>
                        <th>数量</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(item, index) in tableDate">
                        <td>{{ item.itemid }}</td>
                        <td>{{ item.description }}</td>
                        <td>{{ item.spec }}</td>
                        <td>{{ item.unitid }}</td>
                        <td>{{ item.qtyOnhand }}</td>

                    </tr>
                    </tbody>
                </table>
            </div>
        </van-action-sheet>
        <!--<van-action-sheet v-model="showInput"-->

        <!--title="移库">-->
        <!--<div class="action-sheet-table">-->
        <!--<Map :TransferFlag.sync="transferFlag"></Map>-->
        <!--</div>-->
        <!--</van-action-sheet>-->
    </div>
</template>

<script>
  import { wareList } from "../../assets/json/warehouse1";
  import { Dialog, Toast } from "vant";
  import {
    getItemByLocationid,
    getLocation,
    getAllLocation,
    moveLocation
  } from "@/api/goodLocation.js";

  export default {
    name: "InstructionInfo",
    components: {
      // Map: () => import("./component/Map.vue")
    },
    data() {
      return {
        title: "",
        currentStatus: 0,
        dateItem: {},
        transferFlag: 1,
        itemId: "",
        value: "",
        value1: "",
        value2: "",
        list: [],
        tableDate: [],
        preArea: "",
        loading: false,
        checked: false,
        finished: false,
        show: false,
        showInput: false,
        autoRefreshTimer: null,
        shelfInfo: {},
        cancelText: ""
      };
    },
    methods: {
      onClickLeft() {
        console.log("onClickLeft");
        //     this.$router.back(-1);
        this.$router.push({
          path: "/order/list",
          query: {
            value1: this.value1,
            value2: this.value2
          }
        });
      },
      showInfo(id, color) {
        this.getItemByLocationid(id);
        if (color == 2) {
          this.cancelText = "取货";
        } else {
          this.cancelText = "放货";
        }
        // Dialog.alert({
        //     title: '货架详情',
        //     message: '物质号：BV1232\r\n库存类型：STK\r\n物质分类：TE'
        // }).then(() => {
        //     // on close
        // });
      },
      getItemByLocationid(id) {
        var that = this;
        this.itemId = id;
        getItemByLocationid(id).then(res => {
          if (res.data != null) {
            console.info(res.data);
            this.tableDate = res.data;
            this.currentStatus = 1;
          } else {
            this.tableDate = [];
            this.currentStatus = 0;
          }
          this.show = true;
        });
      },
      getLocation() {
        this.list = [];
        if (this.preArea == "R1-A-out" || this.preArea == "R1-A-in") {
          getLocation(this.preArea).then(res => {
            // console.info(res.data[1]);
            if (res.data && res.data.length > 0) {
              this.list = res.data;
            }
          });
        } else {
          getLocation(this.preArea + "-01").then(res1 => {
            if (res1.data && res1.data.length > 0) {
              this.list.push(res1.data[0]);
            }
            getLocation(this.preArea + "-02").then(res2 => {
              if (res2.data && res2.data.length > 0) {
                this.list.push(res2.data[0]);
              }
              getLocation(this.preArea + "-03").then(res3 => {
                if (res3.data && res3.data.length > 0) {
                  this.list.push(res3.data[0]);
                }
              });
            });
          });
          console.dir(this.list);
        }
      },
      getAllLocation() {
        getAllLocation().then(res => {
          if (res.data != null) {
            if (this.preArea == "R1-A-in") {
              this.dateItem.locationVos = res.data.RIN;
              this.list[0] = this.dateItem;
            } else if (this.preArea == "R1-A-out") {
              this.dateItem.locationVos = res.data.ROUT;
              this.list[0] = this.dateItem;
            }
          }
          console.dir(this.list);
        });
      },
      autoRefresh() {
        this.list = [];
        this.getLocation();
        this.autoRefreshTimer = setTimeout(() => {
          this.autoRefresh();
        }, 10000);
      },
      onCancel() {
        this.show = false;
        if (this.currentStatus == 1) {
          this.value1 = this.itemId;
        } else if (this.currentStatus == 0) {
          this.value2 = this.itemId;
        }
        // Toast('cancel');
      },
      submitShelf() {
        console.log("====ss===");
      },
      sumbit() {
        if (!this.value2) {
          return;
        }
        Toast.loading({
          message: "提交中...",
          forbidClick: true
        });
        this.$emit("update:TransferFlag", 0);
        var empid = this.$store.logininfo.empid;
        moveLocation(this.$store.logininfo.empid, this.value1, this.value2).then(
          res => {
            Toast.clear();
            this.value1 = "";
            this.value2 = "";
            Dialog.alert({
              title: "消息",
              message: "移库成功"
            }).then(() => {
              // on close
            });
            // if (res.data!=null) {
            //     this.shelfInfo = res.data;
            // }
          }
        ).catch(err => {
          Toast.clear();
        });
      }
    },
    beforeDestroy() {
      if (this.autoRefreshTimer) {
        clearTimeout(this.autoRefreshTimer);
      }
    },
    watch: {
      checked: function(newValue, oldValue) {
        if (newValue) {
          this.autoRefresh();
        } else {
          if (this.autoRefreshTimer) {
            clearTimeout(this.autoRefreshTimer);
          }
        }
      }
    },
    created() {
      if (this.$route.query.value1 != null) {
        this.value1 = this.$route.query.value1;
      }
      if (this.$route.query.value2 != null) {
        this.value2 = this.$route.query.value2;
      }
      if (this.$route.query.title != null) {
        this.title = this.$route.query.title;
      }
      if (this.$route.query.id != null) {
        this.preArea = this.$route.query.id;
        this.getLocation();
      }
    },
    mounted() {
      const wrap = this.$refs.content;
      // console.log(wrap.clientWidth)
      // if (wrap.clientWidth > 380) {
      //     wrap.style.setProperty('--n', 3);
      // } else {
      //     wrap.style.setProperty('--n', 1);
      // }
      // let inLenght = wrap.children.length;
    }
  };
</script>

<style scoped lang="scss">
    .document-manager-wapper {
        position: relative;
        .document-content {
            position: relative;
            top: 46px;
            height: 100%;
            --n: 6;
            /*margin-bottom: 10px;*/
            overflow-y: auto;
            .cell-content-map-input {
                position: relative;
                width: 100%;
                background: #f1f5f6;
                padding: 10px 0;
                .cell-content-map-input-value {
                    width: 30%;
                }
                .cell-content-map-input-img {
                    width: 55px;
                    height: 20px;
                    img {
                        height: 100%;
                        width: 100%;
                    }
                }
            }
            .cell-content-map-input-flex {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .cell-content {
                padding: 10px;
                position: relative;
                width: 100%;
                /*height: 260px;*/
                /*border: solid 1px yellow;*/
                /*border-bottom: solid 1px #ddd;*/
                .cell-content-body {
                    background: #fff;
                    height: 100%;
                    .cell-title {
                        height: 45px;
                        line-height: 45px;
                        text-align: center;
                        font-size: 20px;
                        font-weight: bold;
                        position: relative;
                        .switch-div {
                            position: absolute;
                            right: 10px;
                            height: 100%;
                            width: 85px;
                            top: 0px;
                            justify-content: center; //子元素水平居中
                            align-items: center; //子元素垂直居中
                            display: -webkit-flex;
                            .span-title {
                                font-weight: normal;
                                font-size: 12px;
                                padding-right: 5px;
                            }
                        }
                    }
                    .cell-wapper {
                        border-top: solid 1px #ddd;
                        height: auto;
                        padding-bottom: 20px;
                        /*text-align: center;*/
                        display: flex;
                        justify-content: center;
                        flex-wrap: wrap;
                        flex-direction: row;
                        .cell-wapper-column {
                            position: relative;
                            /*width: calc(10% - 10px);*/
                            /*margin-right: 10px;*/
                            width: 100%;
                            margin-top: 30px;
                            height: 30px;
                            background-color: #ddd;
                            display: flex;
                            justify-content: center;
                            flex-wrap: nowrap;
                        }
                        .cell-wapper-row {
                            /*background-color: yellow;*/
                            /*border-bottom: solid 1px red;*/
                            width: 20%;
                            background: #969799;
                            border: solid 1px yellow;
                            height: 100%;
                            cursor: pointer;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }
                        .cell-wapper-row1 {
                            /*background-color: yellow;*/
                            /*border-bottom: solid 1px red;*/
                            width: 20%;
                            background: green;
                            border: solid 1px yellow;
                            height: 100%;
                            cursor: pointer;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }
                        .cell-wapper-row2 {
                            /*background-color: yellow;*/
                            /*border-bottom: solid 1px red;*/
                            width: 20%;
                            background: yellow;
                            border: solid 1px green;
                            height: 100%;
                            cursor: pointer;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }
                        .cell-wapper-row3 {
                            /*background-color: yellow;*/
                            /*border-bottom: solid 1px red;*/
                            width: 20%;
                            background: yellow;
                            border: solid 1px yellow;
                            height: 100%;
                            cursor: pointer;
                            -webkit-animation: twinkling 1s infinite ease-in-out;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }
                        .cell-wapper-row4 {
                            /*background-color: yellow;*/
                            /*border-bottom: solid 1px red;*/
                            width: 20%;
                            background: red;
                            border: solid 1px yellow;
                            height: 100%;
                            cursor: pointer;
                            -webkit-animation: twinkling 1s infinite ease-in-out;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }
                        .cell-wapper-row5 {
                            /*background-color: yellow;*/
                            /*border-bottom: solid 1px red;*/
                            width: 20%;
                            background: red;
                            border: solid 1px yellow;
                            height: 100%;
                            cursor: pointer;
                        }
                    }
                }
            }
            .custom-title {
                color: #000;
                padding: 8px 0px;
            }
            .custom-title1 {
                color: #000;
                padding: 8px 0px;
                span {
                    font-size: 12px;
                }
            }
        }

        .divshow {
            -webkit-animation: twinkling 1s infinite ease-in-out;
        }
        .animated {
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }
        @-webkit-keyframes twinkling {
            0% {
                opacity: 0.5;
            }
            100% {
                opacity: 1;
            }
        }
        @keyframes twinkling {
            0% {
                opacity: 0.5;
            }
            100% {
                opacity: 1;
            }
        }
        .action-sheet-table {
            padding: 10px;
            max-height: 300px;
            overflow-y: auto;
            table {
                font-family: Consolas, Menlo, Courier, monospace;
                font-size: 12px;
                border-collapse: collapse;
                border-spacing: 0;
                empty-cells: show;
                border: 1px solid #e9e9e9;
                width: 100%;
                margin-bottom: 24px;
            }
            table th {
                background: #f7f7f7;
                white-space: nowrap;
                color: #5c6b77;
                font-weight: 600;
            }
            table td,
            table th {
                border: 1px solid #e9e9e9;
                padding: 8px 16px;
                text-align: left;
            }
        }
    }
</style>
